<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象属性</title>
</head>

<body>
    <script>
        // Event.currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点
        btn.onclick = function (e) {
            console.log(e.currentTarget);
        }

        // Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。
        // <p id="para">Hello <em>World</em></p>
        function hide(e) {
            console.log(this === e.currentTarget); // 总是 true
            console.log(this === e.target); // 有可能不是 true
            e.target.style.visibility = 'hidden';
        }

        // Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读


        // event事件对象方法
        // Event.preventDefault方法取消浏览器对当前事件的默认行为。
        btn.onclick = function (e) {
            e.preventDefault(); // 阻止默认事件
            console.log("点击A标签");
        }

        // stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数
        btn.onclick = function (e) {
            e.stopPropagation(); // 阻止事件冒泡
            console.log("btn");
        }
    </script>
</body>

</html>